/** * @description:全校维度统计公共组件（学院，年级，班级等维度） */
<template>
  <div class="floor">
    <div class="title">{{ dimensionText }}</div>
    <template v-if="difficultStudentSubList && difficultStudentSubList.length">
      <div :class="[index > 0 ? 'van-hairline--top' : '', 'content']" v-for="(item, index) of difficultStudentSubList" :key="index">
        <div class="content-top">
          <!-- 层层维度递进 -->
          <p @click="skipDetail(item)">
            <i></i>
            <span
              >{{ item.subName }}
              <template>{{ dimensionText === '各年级五困生数据' ? '级' : '' }}</template>
            </span>
          </p>
          <p>
            <span>{{ item.allNums || 0 }}</span>
            <label>人</label>
          </p>
        </div>

        <div class="content-bottom">
          <!-- 辅导员点击，只有全校维度层才可以点击 -->
          <p @click="instructorClick(item)">
            <span>{{ item.instructorNums || 0 }}</span>
            <label>辅导员</label>
          </p>

          <!-- 五困生点击，只有全校维度层才可以点击 -->
          <p @click="fiveHardClick(item.subId)" class="van-hairline--left">
            <span>{{ item.difficultStuNums || 0 }}</span>
            <label>五困生</label>
          </p>
          <p class="van-hairline--left">
            <span>{{ item.proportion }}<i>%</i></span>
            <label>五困生占比</label>
          </p>
        </div>
      </div>
    </template>

    <van-empty v-else description="暂无数据" />
  </div>
</template>

<script>
export default {
  name: 'SchoolDmCount',
  //维度数据,维度text
  props: ['difficultStudentSubList', 'dimensionText'],
  methods: {
    //辅导员点击，只有全校维度层才可以点击
    instructorClick(item) {
      if (this.dimensionText === '各学院五困生数据') {
        this.$router.push({ path: '/instructorMsg', query: { subId: item.subId, tc: item.subName + '辅导员' } })
      }
    },

    //五困生点击，只有全校维度层才可以点击
    fiveHardClick(subId) {
      if (this.dimensionText === '各学院五困生数据') {
        this.$router.push({ path: '/classesListMsg', query: { subId } })
      }
    },

    //维度层级click
    skipDetail(item) {
      let type = undefined
      if (this.dimensionText === '各学院五困生数据') {
        type = 'college'
      } else if (this.dimensionText === '各年级五困生数据') {
        type = 'grade'
      } else {
        type = 'class'
      }
      this.$emit('skipDetail', item, type)
    },
  },
}
</script>

<style lang="scss" scoped>
.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;
  .title {
    font-size: $fz16;
    color: $color-title;
    font-weight: normal;
  }
}

.content {
  margin-top: 24.5px;
  &-top {
    @include fcb();
    p {
      i {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url('../../../assets/images/college-icon.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 12px;
      }
      span {
        font-size: $fz22;
        color: $color-title;
      }
      label {
        font-size: $fz12;
        color: $color-title;
        margin-right: 10px;
      }
    }
    p:first-child {
      @include fh();
    }
  }

  &-bottom {
    @include fca();
    padding-top: 25px;
    p {
      flex: 1;
      text-align: center;
      span,
      label {
        display: block;
      }
      span {
        font-size: $fz20;
        text-align: center;
        i {
          font-size: $fz12;
        }
      }
      label {
        font-size: $fz12;
        color: #97979f;
        margin-top: 8px;
      }
    }
  }
}

.content + .content {
  padding-top: 27px;
}

.content:last-child {
  padding-bottom: 27px;
}
</style>
